<template>
    <el-dialog v-model="show" :title="t('评论管理')" :close-on-press-escape="false" :close-on-click-modal="false"
        :show-close="true" :draggable="true" @before-close="() => false" append-to-body style="width: 70%;">
        <QueryBase @onSearch="doQuery" style="width:96%">
            <template #search>
                <el-form :inline="true" :model="queryForm">
                    <el-form-item :label="t('课程分类')">
                        <el-select v-model="queryForm.apprType" :placeholder="t('请选择')" style="width: 200px;"
                            @change="onChangeApprType">
                            <el-option v-for="item in apprTypeOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </template>
            <template #operation>
                <div></div>
            </template>
            <el-table ref="multipleTableRef" :data="tableData" :border="true" header-row-class-name="table-header"
                height="400">
                <el-table-column prop="comment" :label="t('评论')" width="180" />
                <el-table-column prop="creator" :label="t('评论人')" width="180" />
                <el-table-column prop="createTime" :label="t('评论时间')" width="180" />
                <el-table-column prop="status" :label="t('状态')">
                    <template #default="scope">
                        {{ getStatusText(scope.row.status) }}
                    </template>
                </el-table-column>
                <el-table-column :label="t('操作')">
                    <template #default="scope">
                        <div style="display: flex;" v-if="scope.row.status === 'APPROVING'">
                            <el-button type="text" @click="handlePass(scope.row)">{{ t('通过') }}</el-button>
                            <el-button type="text" @click="handleReject(scope.row)">{{ t('驳回') }}</el-button>
                            <el-button type="text" @click="handleDelete(scope.row)">{{ t('删除') }}</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </QueryBase>
        <div class="comments-result-pn">
            <VPageNavigation :total="total" @on-size-changed="handleSizeChange" @on-page-changed="handleCurrentChange">
            </VPageNavigation>
        </div>
    </el-dialog>
</template>
<script setup lang="ts">
import { computed, defineProps, onMounted, reactive, ref, unref, watch } from 'vue';
import { t } from '@/common/locale';
import { Sysinfo } from '@/common/config';
import elHelper from '@/common/elHelper';
import { approveComment, delComment, getCourseComments } from '@/api/course';
import comFunc from '@/common/comFunc';
const props = defineProps({
    courseId: {
        type: String,
        default: '',
        required: true
    }
})
const show = defineModel('show', { type: Boolean })
const queryForm: { apprType: string } = reactive({
    apprType: 'APPROVING'
})
const apprTypeOptions = ref([
    {
        value: 'APPROVING',
        label: '审核中',
    },
    {
        value: 'APPROVED',
        label: '审核通过',
    },
    {
        value: 'REJECTED',
        label: '审核不通过',
    }
])
const total = ref(0)
const page = ref(1)
const pageSize = ref(Sysinfo.PageSize)
const tableData = ref<CourseCommentModel[]>([])

watch(() => show.value, (val) => {
    if (val) {
        queryForm.apprType = 'APPROVING'
        doQuery()
    } else {
        queryForm.apprType = 'APPROVING'
    }
})

const getStatusText = (v: string) => {
    const l = unref(apprTypeOptions)
    const item = l.find(w => w.value === v)
    if (item) return item.label
    else return ''
}
const doQuery = async () => {
    if (!props.courseId) return
    const loading = elHelper.showLoading()
    const re = await getCourseComments({
        relatedId: props.courseId,
        apprType: queryForm.apprType,
        pageSize: pageSize.value,
        to: page.value
    })
    if (re.isSuccess) {
        tableData.value = re.data || []

        total.value = re.totalRow || 0
        page.value = re.pageNum || 1
    } else {
        elHelper.showErrorMsg(re.msg)
    }
    elHelper.closeLoading(loading)
}

const handleSizeChange = (val: number) => {
    pageSize.value = val
    doQuery()
}
const handleCurrentChange = (val: number) => {
    page.value = val
    doQuery()
}
const handlePass = async (data: CourseCommentModel) => {
    doApproveComments('APPROVED', data)
}
const handleReject = async (data: CourseCommentModel) => {
    doApproveComments('REJECTED', data)
}
const handleDelete = async (data: CourseCommentModel) => {
    const confirm = await elHelper.showConfirmMsg('确定要删除？')
    if (confirm) {
        const re = await delComment(data.objectId)
        if (re.isSuccess) {
            elHelper.showSuccessMsg('操作成功!')
            doQuery()
        } else {
            elHelper.showErrorMsg(re.msg)
        }
    }
}
const doApproveComments = async (apprType: string, data: CourseCommentModel) => {
    const re = await approveComment({
        approveType: apprType,
        objectId: comFunc.nvl(data.objectId)
    })
    if (re.isSuccess) {
        elHelper.showSuccessMsg('操作成功')
        doQuery()
    } else {
        elHelper.showErrorMsg(re.msg)
    }

}
const onChangeApprType = () => {
    doQuery()
}
onMounted(() => {
    doQuery()
})
</script>
<style lang="scss" scoped>
.comments-result-pn {
    padding-top: 15px;
    display: flex;
    justify-content: flex-end;
}
</style>